html, body {
    width: 100%;
    /*height: 100%;*/
    padding: 0;
    margin: 0;
    color: #333;
    position: relative;
    background-color: #F4F4F4;
    overflow-y: auto;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

* {
    box-sizing: border-box;
}

:root {
    --main-bg-color: #c3c3c3;
    /*#009688*/
    --theme-color: #1E9FFF;
}

#header {
    width: 100%;
    height: 60px;
    background-color: #202932;
    margin: 0 auto;
    position: fixed;
    z-index: 10;
}

#header .header_content {
    width: 1170px;
    height: 100%;
    margin: 0 auto;
}

#footer {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    margin: 0 auto;
    padding: 5px 0;
    background-color: #202932;
    text-align: center;
}

#sentinels {
    overflow: hidden;
    display: flex;
    width: 100%;
    margin: 0 auto;
    height: 26px;
    background-color: #FFF;
    text-align: center;
}

#footer .stand_by {
    height: 100%;
    width: 100%;
    line-height: 1em;
    font-size: 1em;
    color: #FFF;
}

#footer .stand_by .support {
    margin-right: 10px;
}

#footer .stand_by .support a {
    color: #09b7fa;
    padding: 0 5px;
    text-decoration: none;
}

.header-banner {
    height: 100%;
    width: 120px;
    float: left;
    background-image: linear-gradient(45deg, #33e4d5 0%, #a183e8 50%);
}

.header-opt {
    height: 100%;
    float: right;
    font-size: 12px;
}

.header-opt .opt_ul .opt_li {
    line-height: 60px;
    display: block;
    float: left;
    padding: 0 20px;
    color: #9d9d9d;
    cursor: pointer;
}

.header-opt .opt_ul .opt_li.online_opt {
    position: relative;
    height: 60px;
    display: none
}

.header-opt .opt_ul .opt_li.online_opt:hover {
    background-color: #6d5b98;
}

.header-opt .opt_ul .opt_li.online_opt .avatar {
    height: 60px;
    width: 40px;
    display: block;
    border-radius: 30px;
    padding: 10px 0;
}

.header-opt .opt_ul .opt_li.online_opt:hover .user_info {
    display: block;
}

.header-opt .opt_ul .opt_li.online_opt .user_info {
    width: 100px;
    display: none;
    position: absolute;
    right: 0;
    z-index: 3;
    top: 60px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-clip: padding-box;
    border-radius: 0 0 4px 4px;
}

.header-opt .opt_ul .opt_li.online_opt .user_info .user_item {
    height: 30px;
    line-height: 30px;
    display: block;
    text-align: left;
    width: 100%;
}

.header-opt .opt_ul .opt_li.online_opt .user_info .user_item a {
    line-height: 30px;
    height: 30px;
    width: 100%;
    padding: 0 15px;
    background: #FFF;
}

.header-opt .opt_ul .opt_li.online_opt .user_info .user_item:last-child a {
    border-radius: 0 0 4px 4px;
}

.header-opt .opt_ul .opt_li.online_opt .user_info .user_item:hover a {
    background-color: #EEEEEE;
    color: #6d5b98;
}

.header-opt .opt_ul .opt_li .avatar img {
    width: 100%;
    display: block;
    border-radius: 30px;
}

.header-opt .opt_ul .opt_li a {
    line-height: 60px;
    display: block;
    float: left;
    color: #9d9d9d;
    text-decoration: none;
    cursor: pointer;
}

.header-opt .opt_ul .opt_li a .iconfont {
    font-size: 12px;
    margin-right: 5px;
}

.header-opt .opt_ul .opt_li:not(.online_opt):hover a {
    color: #FFF;
}

#link_page,
#container {
    width: 1170px;
    min-height: calc(100% - 86px);
    /*min-height: 500px;*/
    padding: 10px;
    margin: 60px auto 0;
    background-color: #FFF;
}

#search_content {
    width: 100%;
    padding: 5px;
    min-height: 800px;
}

#search_content .content_nav {
    width: 100%;
    line-height: 30px;
    font-size: 13px;
    overflow: hidden;
    margin-bottom: 10px;
}

#search_content .content_area {
    width: 100%;
    font-size: 13px;
    overflow: hidden;
}

#search_content .content_area .diary_item {
    width: 25%;
    padding: 0 10px 20px 10px;
    float: left;
    background-color: #FFF;
}

#search_content .content_area .diary_item .diary_cover {
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #f6f6f6;
    border-radius: 3px;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    position: relative;
    transition: all 1s ease 0s;
}

#search_content .content_area .diary_item .diary_cover.fadeIn {
    opacity: 1;
    transition: all 1s;
}

#search_content .content_area .diary_item:nth-child(9n+1) .diary_cover {
    background: rgba(62, 65, 180, .7);
}

#search_content .content_area .diary_item:nth-child(9n+2) .diary_cover {
    background: rgba(236, 131, 54, .7);
}

#search_content .content_area .diary_item:nth-child(9n+3) .diary_cover {
    background: rgba(42, 180, 255, .7);
}

#search_content .content_area .diary_item:nth-child(9n+4) .diary_cover {
    background: rgba(66, 150, 66, .7);
}

#search_content .content_area .diary_item:nth-child(9n+5) .diary_cover {
    background: rgba(221, 84, 84, .7);
}

#search_content .content_area .diary_item:nth-child(9n+6) .diary_cover {
    background: rgba(0, 85, 207, .7);
}

#search_content .content_area .diary_item:nth-child(9n+7) .diary_cover {
    background: rgba(235, 137, 84, .7);
}

#search_content .content_area .diary_item:nth-child(9n+8) .diary_cover {
    background: rgba(166, 132, 110, .7);
}

#search_content .content_area .diary_item:nth-child(9n+9) .diary_cover {
    background: rgba(255, 183, 115, .7);
}

#search_content .content_area .diary_item .diary_cover:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
    background: linear-gradient(135deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4, #f441a5, #ffeb3b);
    background-size: 400%;
    animation: animate 1500ms linear 0s alternate; /*延迟0秒后, 播放一次, 2秒内*/
}

@keyframes animate {
    0% {
        background-position: 0%; /*修改背景定位，实现渐变色炫光*/
    }
    50% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}

#search_content .content_area .diary_item .diary_cover:hover .cover img {
    -webkit-filter: brightness(.7);
    filter: brightness(.7);
    -moz-transform: scale(1.18);
    -webkit-transform: scale(1.18);
}

#search_content .content_area .diary_item .diary_cover .diary_info {
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding-left: 10px;
    font-size: 10px;
    background: #f6f6f6;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #e7e7e7;
    box-shadow: 0 1px 0 0 #fff inset;
    color: #8B8B8C;
}

#search_content .content_area .diary_item .diary_cover .diary_info .author:hover .iconfont {
    color: #2D2D2D;
}

#search_content .content_area .diary_item .diary_cover .diary_info .author {
    height: 30px;
    width: 30px;
    float: left;
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

#search_content .content_area .diary_item .diary_cover .diary_info .author .iconfont {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
}

#search_content .content_area .diary_item .diary_cover .diary_info .diary_statistics .iconfont {
    font-size: 10px;
    margin-right: 3px;
}

#search_content .content_area .diary_item .diary_cover .diary_info .diary_statistics .statistics_block:first-child {
    margin-right: 10px;
}

#search_content .content_area .diary_item .diary_cover .diary_info .diary_statistics {
    width: calc(100% - 30px);
    float: left;
    border-right: 1px solid #e7e7e7;
}

#search_content .content_area .diary_item .diary_cover .archive .iconfont {
    margin-right: 5px;
}

#search_content .content_area .diary_item .diary_cover .archive {
    bottom: 34px;
    font-size: 12px;
    height: 30px;
    left: 10px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#search_content .content_area .diary_item .diary_cover .archive .iconfont {
    font-size: 12px;
}

#search_content .content_area .diary_item .diary_cover .title {
    /*background: linear-gradient(-45deg, #fff 45%, #666 50%, #fff 55%);
    background-size: 50% 100%;
    -webkit-background-clip: text;
    color: transparent;
    animation: aitf 5s linear infinite;*/
    cursor: pointer;
}


@keyframes aitf {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


#search_content .content_area .diary_item .diary_cover .title:hover {
    color: #60BDE8;
}

#search_content .content_area .diary_item .diary_cover .introduce {
    color: #838383;
    padding-bottom: 5px;
    font-size: 85%;
    height: 35px;
    overflow: hidden;
}

#search_content .content_area .diary_item .diary_cover .title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    display: block;
    font-weight: bold;
    line-height: 30px;
    height: 30px;
}

#search_content .content_area .diary_item .diary_cover .cover .cover_content {
    width: 100%;
    padding: 0 10px;
}

#search_content .content_area .diary_item .diary_cover .cover {
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    background: #FFF;
}

#search_content .content_area .diary_item .diary_cover .cover img {
    border-radius: 3px;
    width: 100%;
    height: 100%;
    transition: all 1s ease 0s;
}

#search_content .content_nav .cur_catalog .level_first,
#search_content .content_nav .cur_catalog .level_second {
    padding: 0 10px;
}

#search_content .content_nav .cur_catalog .level_first {
    color: #367dff;
    cursor: pointer;
}

#search_content .content_nav .cur_catalog .level_first:hover {
    color: #23527c;;
    text-decoration: underline;
}

#search_content .content_nav .cur_catalog .iconfont {
    font-size: 13px;
}

#search_content .content_nav .cur_catalog {
    width: 50%;
    height: auto;
    float: left;
}

#search_content .content_nav .filter_condition {
    width: 50%;
    height: auto;
    float: left;
}

#search_content .content_nav .filter_condition .filter_ul .filter_li .iconfont {
    font-size: 13px;
    margin-right: 5px;
}

#search_content .content_nav .filter_condition .filter_ul .filter_li {
    float: right;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
}

#search_content .content_nav .filter_condition .filter_ul .filter_li:hover {
    color: #367dff;
}

body::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.user_pocket {
    height: 5rem;
    width: 100%;
    /*background: #1E9FFF;*/
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: space-between; /*两端边缘对齐均分*/
    padding: 5px;
}

.user_pocket .pocket_item {
    width: 4rem;
    height: 4rem;
    display: block;
    line-height: 4rem;
    text-align: center;
    border-radius: 3px;
    color: #333;
    background: #f2f2f2;
    cursor: pointer;
}

.user_pocket .pocket_item:hover .item_bg .iconfont {
    /* 安排下面的动画 尤其是 infinite 才会一直动 */
    animation: scale-spring;
    animation-duration: 1s;
    /* Safari and Chrome */
    -webkit-animation: scale-spring;
    -webkit-animation-duration: 1s;
}

/**心跳**/
@-webkit-keyframes scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(.5)
    }
    80% {
        opacity: .8;
        -webkit-transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

@keyframes scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(.5)
    }
    80% {
        opacity: .8;
        -webkit-transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

.user_pocket .pocket_item:hover {
    opacity: .8;
}

/*.user_pocket .pocket_item:not(:last-child) {
    margin-right: 10px;
}*/

.user_pocket .pocket_item.my_diary .item_bg {
    background: #393D49;
}

.user_pocket .pocket_item .item_bg .iconfont {
    display: block;
    line-height: 4rem;
    font-size: 2rem;
    color: #FFF;
}

.user_pocket .pocket_item .item_bg .iconfont.icon-miao {
    font-size: 2.5rem;
}

.user_pocket .pocket_item.my_treasure .item_bg {
    background: #FFB800;
}

.user_pocket .pocket_item.item_lo .item_bg {
    background: #1E9FFF;
}

/*QQ btn*/
.hue_rotate {
    /*background: radial-gradient(red, orange, yellow, green, cyan, blue, purple);*/
    /*background-image: radial-gradient(closest-side at 60% 55%, #5433FF, #20BDFF);*/
    /*background-image: radial-gradient(farthest-side at 60% 55%, #5433FF, #20BDFF);*/
    animation: hue-rotate 1500ms linear 0ms infinite;
}

@keyframes hue-rotate {
    0% {
        background-image: radial-gradient(ellipse farthest-side at 0% 0%, #5433FF, #20BDFF);
    }
    50% {
        background-image: radial-gradient(ellipse farthest-side at 0% 50%, #5433FF, #20BDFF);
    }
    50% {
        background-image: radial-gradient(ellipse farthest-side at 0% 100%, #5433FF, #20BDFF);
    }
    75% {
        background-image: radial-gradient(ellipse farthest-side at 50% 100%, #5433FF, #20BDFF);
    }
    100% {
        background-image: radial-gradient(ellipse farthest-side at 100% 100%, #5433FF, #20BDFF);
    }
}

.user_pocket .pocket_item.item_ho .item_bg {
    background: #FF5722;
}

.user_pocket .pocket_item .item_bg {
    width: 4rem;
    height: 4rem;
    display: block;
    line-height: 4rem;
    text-align: center;
    float: left;
    border-radius: 3px 0 0 3px;
}

.user_pocket .pocket_item .item_name {
    width: calc(100% - 4rem);
    height: 100%;
    display: block;
    line-height: 78px;
    text-align: center;
    float: left;
}

.user_pocket .pocket_item .item_name .name_value,
.user_pocket .pocket_item .item_name .name_title {
    width: 100%;
    height: 50%;
    display: block;
    line-height: 39px;
    text-align: center;
    float: left;
}

.user_pocket .pocket_item .item_name .name_value {
    font-size: 2rem;
    line-height: 3rem;
}

.user_pocket .pocket_item .item_name .name_title {
    font-size: .8rem;
}

.system_briefing {
    height: 50px;
    width: calc(100% - 10px);
    margin: 5px auto;
    font-size: 14px;
    text-indent: .5em;
    z-index: 5;
    position: relative;
    /*background-image: linear-gradient(to right, #33e4d5 0%, #a183e8 50%);*/
    background-color: #FFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}

.system_briefing .briefing_box {
    width: 1170px;
    display: flex;
}

.system_briefing #nav_ul_li {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 1;
    background: #FFF;
    border-top: 1px solid #E8E8E8;
}

.system_briefing #nav_ul_li .nav_ul {
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    cursor: pointer;
    margin: 0 auto;
    /*width: 100%;*/
}

.system_briefing #nav_ul_li .nav_ul:before {
    display: table;
    content: " ";
}

.system_briefing #nav_ul_li .nav_ul:after {
    clear: both;
    display: table;
    content: " ";
}

.system_briefing #nav_ul_li .nav_ul.nabc {
    -webkit-animation: nvfadeInDown .3s .1s ease both;
}

.system_briefing #nav_ul_li .nav_ul .nav_li {
    width: calc(25% - 14px);
    border: 1px solid #EDEDED;
    text-align: center;
    margin: 10px 5px 0;
    display: inline-block;
    line-height: 40px;
    font-size: 15px;
    position: relative;
    cursor: pointer;
}

#nav_ul_li .nav_ul .nav_li .iconfont {
    color: #367dff;
    font-size: 15px;
    margin-right: 10px;
}

.system_briefing #nav_ul_li .nav_ul .nav_li:hover {
    border: 1px solid #EDEDED;
    margin: 10px 5px 0;
    line-height: 40px;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
    -ms-transition: all 0.6s ease-in;
    -o-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
}

.system_briefing #nav_ul_li .nav_ul .nav_li:hover {
    color: #367dff;
}

.system_briefing #nav_ul_li .nav_ul .nav_li.c-btn:after {
    content: '';
    display: block;
    position: absolute;
}

.system_briefing #nav_ul_li .nav_ul .nav_li.c-btn:before {
    content: '';
    display: block;
    position: absolute;
}

.system_briefing #nav_ul_li .nav_ul .nav_li:hover {
    border: 1px solid #367dff;
}

.system_briefing .system_nav {
    display: block;
    font-size: .8rem;
    height: 100%;
    color: #69696d;
    padding: 0 20px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    max-width: 1170px;
    margin: 0 auto;
}

.system_briefing .system_nav .iconfont {
    margin-right: 5px;
    font-size: .8rem;
}

.c-btn-border-line {
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0 transparent;
}

.c-btn-border-line:after, .c-btn-border-line:before {
    box-sizing: border-box;
    border: 1px solid transparent;
    width: 0;
    height: 0;
}

.c-btn-border-line:after {
    top: 0;
    left: 0;
    -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
    transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}

.c-btn-border-line:before {
    bottom: 0;
    right: 0;
    -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
    transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}

.c-btn-border-line:hover:after, .c-btn-border-line:hover:before {
    width: 100%;
    height: 100%;
}

.c-btn-border-line:hover:after {
    border-top-color: #367dff;
    border-right-color: #367dff;
    -webkit-transition: width 0.2s ease-out 0s, height 0.2s ease-out 0.2s;
    transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}

.c-btn-border-line:hover:before {
    border-bottom-color: #367dff;
    border-left-color: #367dff;
    -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
    transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

.system_info {
    height: 720px;
    width: 100%;
}

/**
 * 虚化
 */
.system_info.mh {
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0.9;
    -webkit-animation: nvfadeInDown 1s .1s ease both;
    -moz-animation: nvfadeInDown 1s .1s ease both;
}

#search_content.mh {
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0.9;
    -webkit-animation: nvfadeInDown 1s .1s ease both;
    -moz-animation: nvfadeInDown 1s .1s ease both;
}

/**
 * 实化
 */
.system_info.mg {
    -webkit-animation: nvfadeOutUp 1s .2s ease both;
    -moz-animation: nvfadeOutUp 1s .2s ease both;
}

#search_content.mg {
    -webkit-animation: nvfadeOutUp 1s .2s ease both;
    -moz-animation: nvfadeOutUp 1s .2s ease both;
}

@-webkit-keyframes nvfadeInDown {
    0% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes nvfadeOutUp {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.system_info .info_left {
    height: 100%;
    padding: 5px;
    width: 100%;
    float: left;
    /*background-color: #1E9FFF;*/
}

.system_info .info_right {
    height: 100%;
    padding: 5px 5px 5px 0;
    width: calc(100% - 410px);
    /*background: #009688;*/
    float: left;
}

.system_info .info_right #box-clock {
    height: 265px;
    width: 100%;
    /*background-image: linear-gradient(45deg, #33e4d5 0%, #a183e8 50%);*/
    background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003235) 68%, rgba(255, 206, 196, 0.5) 163%),
    linear-gradient(163deg, rgba(49, 146, 170, 0.0794448997) 86%, rgba(239, 112, 138, 0.5) 40%),
    linear-gradient(30deg, #a183e8 22%, rgba(237, 106, 134, 0.5) 169%),
    linear-gradient(48deg, #33e4d5 64%, #a183e8 43%);
    float: left;
}

.system_info .info_right #box-info {
    height: 300px;
    width: 100%;
    float: left;
    margin-top: 5px;
}

.system_info .info_right #survey {
    height: 130px;
    width: 100%;
    float: left;
    margin-top: 5px;
}

.system_info .info_left .left_content {
    width: 100%;
    float: left;
    position: relative;
}

.system_info .info_left .left_content .box-shiny {
    width: 200px;
    height: 200px;
    float: left;
    background: #EEE;
}

.system_info .info_left .left_content #clock {
    width: 200px;
    height: 200px;
    float: left;
    padding: 5px;
    background-image: linear-gradient(135deg, #5433FF 20%, #20BDFF 70%, #A5FECB 100%);
    /*background-image: linear-gradient(135deg, #a183e8 20%, #20BDFF 70%, #33e4d5 100%);*/
}

.info_left_top {
    height: 300px;
    background-color: #2F4056;
}

.info_left_bottom {
    margin-top: 5px;
}

/*系统简报*/
.content_title {
    display: block;
    width: 100%;
    border-left: 5px solid var(--theme-color);
    font-size: 14px;
    font-weight: bold;
    background: #f2f2f2;
    height: 30px;
    line-height: 30px;
    text-indent: .5em;
}

.qa {
    display: block;
    width: 100%;
    height: calc(100% - 30px);
    font-size: 14px;
    text-indent: 2em;
    line-height: 2em;
    padding: 10px;
    color: #69696d;
}

.qa .content {
    display: block;
}

.qa .signature {
    float: right;
    font-size: 12px;
}

.qa .signature .linear_text {
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
}

.shortcut {
    width: 100%;
    height: 270px;
    background: #FFF;
    margin-top: 5px;
}

.content_title .switch_one {
    font-size: 12px;
    float: right;
    font-weight: normal;
    padding-right: .5em;
    cursor: pointer;
    color: #09b7fa;
}

.content_title .switch_one .iconfont {
    font-size: 12px;
}

.content_title .switch_one:hover {
    text-decoration: underline;
}

.diary_show {
    display: block;
    width: 100%;
    height: calc(100% - 30px);
    font-size: 14px;
    text-indent: 2em;
    line-height: 2em;
    padding: 10px;
    color: #FFF;
}

.diary_show .content,
.diary_show .signature {
    display: block;
}

.diary_show .signature {
    text-align: right;
}

a:focus {
    outline: none;
}

#bubble {
    display: none;
    position: absolute;
    top: 460px;
    left: 0;
    z-index: 1;
}

#bubble .message {
    display: inline-block;
    background: #000;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 26px;
    clear: both;
    position: relative;
}

#bubble .message:after {
    display: block;
    content: '';
    border-width: 8px 8px 8px 8px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
    /* 定位 */
    position: absolute;
    left: calc(50% - 8px);
    top: 100%;
}